<template>
	<van-popup
		v-model="visible"
		position="bottom"
		round
		closeable
		:duration="0.2"
		get-container="#app"
	>
		<div class="choice-city">
			<div class="title">{{ title }}</div>
			<div class="list">
				<city-list :list="list" v-model="active" @select="confirm" />
			</div>
			<!-- <div class="submit">
				<van-button block color="#ff7400" @click="confirm">确 定</van-button>
			</div> -->
		</div>
	</van-popup>
</template>
<script>
import CityList from "./city-list";
export default {
	components: {
		CityList
	},
	props: {
		title: String,
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			visible: false,
			active: ""
		};
	},
	methods: {
		open() {
			this.visible = true;
		},
		close() {
			this.visible = false;
		},
		confirm(v) {
			this.close();
			this.$emit("confirm", v);
		}
	}
};
</script>
<style lang="scss" scoped>
.choice-city {
	max-height: 60vh;
	display: flex;
	flex-direction: column;
	text-align: center;
	overflow: hidden;
	.title {
		margin: 18px 0.17777rem;
		font-weight: 500;
		font-size: 0.4rem;
		color: #222;
		line-height: 1;
	}
	.list {
		border-top: 1px solid #f1f0f0;
		flex: 1;
		overflow: auto;
		padding: 0.22222rem 0.11111rem;
	}
	.submit {
		box-shadow: 0 0 0.222222rem #eee;
		padding: 0.33333rem 0.555555rem;
	}
}
</style>
